<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { watch } from 'vue'
import useStore from '../store'
const { newsList, channel } = useStore()
const { getNewsList } = newsList
const { active } = storeToRefs(channel)
const { newsList: newsListData } = storeToRefs(newsList)
watch(active, (newValue) => getNewsList(newValue))
</script>

<template>
  <div className="list">
    <div className="article_item" v-for="item in newsListData" :key="item.art_id">
      <h3 className="van-ellipsis">{{ item.title }}</h3>
      <div className="img_box">
        <!-- <img :src="item.cover.images?[0]" className="w100" alt="" /> -->
        <!-- <img :src="item.cover.type === 0 ? 'http://geek.itheima.net/resources/images/66.jpg' : item.cover.images?[0]" className="w100" alt="" /> -->
        <img :src="item.cover.images === undefined ? 'http://geek.itheima.net/resources/images/66.jpg' : item.cover.images[0]" className="w100" alt="" />
      </div>
      <div className="info_box">
        <span>{{ item.aut_id }}</span>
        <span>{{ item.comm_count }} 评论</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>

<style scoed lang="less"></style>
